<template>
    <div class="app-container" ref="appContainer">
        <div class="header">
            <div class="search">
                <el-button type="primary" @click="onclickSearch" :icon="Search">搜索</el-button>
            </div>
        </div>

        <!-- ------------表格--------------->
        <div class="table">
            <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" :border="true">
                <el-table-column label="id" align="center" prop="id" width="125px">
                </el-table-column>
                <el-table-column label="serverType" align="center" prop="serverType" width="250px">
                </el-table-column>

                <el-table-column label="ip" align="center" prop="ip" width="200px">
                </el-table-column>
                <el-table-column label="http_port" align="center" prop="http_port" width="100px">
                </el-table-column>
                <el-table-column label="socket_port" align="center" prop="socket_port" width="100px">
                </el-table-column>
                <el-table-column label="onlineNum" align="center" prop="onlineNum" width="150px">
                </el-table-column>
                <el-table-column label="useridList" align="center" prop="useridList" >
                </el-table-column>

            </el-table>

        </div>




    </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Search } from '@element-plus/icons-vue'
import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Logger } from '@/engine/util/Logger'
import { HttpClient } from '@/utils/HttpClient'
import { da, fa, fi, ro, tr } from 'element-plus/es/locale'
import { UIHelper } from '@/utils/UIHelper'
import { Config } from '@/config/Config'
import { config } from 'exceljs'
import { UserModel } from '@/store/model/UserModel'
const loading = ref(true)
const appContainer = ref(null)

let uploadUrl = Config.getUploadImgUrl()
const imageUrl = ref("")

let fileList = []

const inputSearch = reactive({
    searchId: '',
})

//列表查询选项
const listQuery = reactive({
    pagenum: 1, //第几页
    pagesize: 10, //一页多少个
})

let list = reactive([
    {

    }
])
let pageObj = reactive({
    total: 0
})

const dialogVisible = ref(false)



onMounted(() => {
    nextTick(() => {
        // let data = appContainer.value.
    })
    setTimeout(() => {
        loading.value = false
    }, 500)
    getList()
})


const onclickSearch = () => {
    Logger.log('onclickSearch!', inputSearch)
    getList()
}

const handleSizeChange = (val: number) => {
    listQuery.pagesize = val
    getList()
}

const formatUserList = (users: Array<object>) => {
    for (let i = 0; i < users.length; i++) {
        let user = {
            "id": users[i]["id"],
            "serverType": users[i]["serverType"],
            "ip": users[i]["ip"],
            "http_port": users[i]["http_port"],
            "socket_port": users[i]["socket_port"],
            "onlineNum": users[i]["onlineNum"],
            "useridList": users[i]["useridList"],
        }
        list.push(user)
    }
}

const getList = () => {
    // loading.value = true;
    HttpClient.get_server_list((data: object) => {
        list.splice(0)
        let huanghua_mj_server_list: Array<object> = data["huanghua_mj_server_list"]
        formatUserList(huanghua_mj_server_list)
        let cangxian_mj_server_list: Array<object> = data["cangxian_mj_server_list"]
        formatUserList(cangxian_mj_server_list)
        formatUserList(data["dazhonger_mj_server_list"])
        formatUserList(data["ddz_server_list"])
        formatUserList(data["jianziding_server_list"])
        formatUserList(data["paodekuai_server_list"])
    })
}


</script>
    
<style scoped lang="scss">
.header {
    display: flex;
    padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);

    .search-form {
        flex: 1;

        ::v-deep {
            .el-input--default {
                width: 200px;
            }
        }
    }

    .search {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
</style>
    